<template>
  <div>
    <!--导航栏 start-->
    <div class="bg-[#3c79a8] h-[40px]">
      <div class="w-[1220px] m-auto  h-full flex justify-between items-center">
        <div class="flex items-center">
          <!--<img src="@/assets/W020210122020501154999.png" class="w-[20px] h-[20px]"/>-->
          <!--<span class="text-white text-sm ml-2">xxxx门户网站</span>-->
        </div>
        <div class="flex items-center cursor-pointer">
          <div class="flex items-center mx-2"  v-if="userInfo&&userInfo.id">
            <img src="@/assets/user_center_icon.png" class="w-[15px] h-[15px]"/>
            <span class="text-white text-sm ml-2 " @click="()=>{
              $router.push(`/user-info`)
            }">个人中心</span>
          </div>


          <el-popconfirm
              v-if="userInfo&&userInfo.id"
              title="确认退出么？"
              @confirm="handlerExit"
          >
            <div class="flex items-center mx-2" slot="reference">
              <img src="@/assets/exit.png" class="w-[15px] h-[15px]"/>
              <span class="text-white text-sm ml-2 ">退出</span>
            </div>
          </el-popconfirm>


          <!--<div class="flex items-center mx-2">-->
          <!--  <span class="text-white text-sm ml-2 ">简体</span>-->
          <!--  <span class="text-white text-sm ml-2 ">繁体</span>-->
          <!--</div>-->
          <!--<div class="flex items-center mx-2">-->
          <!--  <img src="@/assets/user_center_icon.png" class="w-[15px] h-[15px]"/>-->
          <!--  <span class="text-white text-sm ml-2 ">无障碍</span>-->
          <!--</div>-->
          <!--<div class="flex items-center bg-amber-500 py-1 px-3 rounded mx-2">-->
          <!--  <img src="@/assets/ZZMS_laoren.png" class="w-[15px] h-[15px]"/>-->
          <!--  <span class="text-white text-sm ml-2 ">长者模式</span>-->
          <!--</div>-->
        </div>
      </div>
    </div>
    <!--导航栏 end-->
    <!--背景栏目 start-->
    <div style="height: 265px" :style="{background:`url(${require('@/assets/common-head-bg.png')})`}">
      <div class="w-[1220px] m-auto h-full  flex flex-col justify-between">
        <div class="mt-5">
          <!--<img src="@/assets/W020210121859046117391.png"/>-->
        </div>
        <div class="mt-5 flex justify-center mb-10">
          <!--<img src="@/assets/W020200526445896258471.png"/>-->
        </div>
      </div>
    </div>
    <!--背景栏目 end-->
    <div class="bg-[#1f6aaa] h-1"></div>
    <!-- 主体内容-->
    <div>
      <div class="bg-[#f9f9f9] w-[1220px] m-auto  px-[20px] py-[10px] " :class="[$route.meta.hideMenu?'!bg-[#FFF]':'']">
        <div class="text-sm  !text-blue-400 cursor-pointer" @click="()=>{
          $router.push(`/`)
        }">首页>></div>
        <div class="flex mt-3">
          <div v-if="!$route.meta.hideMenu" class="left  w-[260px] mr-[30px] ">
            <template v-for="(item,index) in menuList">
              <div :key="index" class="mb-2 _menu-item cursor-pointer select-none	"
                   :class="[item.checked?'text-white':'text-[#2d66a5]']">
                <div @click="handlerMenuSelect(item)" :class="[item.checked?'bg-[#2d66a5]':'bg-[white]']"
                     class="w-full h-[80px]  flex items-center  cursor-pointer  px-5">
                  <template>
                    <div style="flex: 0 0 20%" class="">
                      <img v-if="item.checked" :src="item.iconSelect"/>
                      <img v-else :src="item.icon"/>
                    </div>
                  </template>
                  <div style="flex: 1 " class=" flex items-center justify-between px-5">
                    <span class=" text-2xl flex justify-between " style="flex: 0 0 100px;"
                          v-html="item.title"
                          :class="[item.checked?'text-white':'text-[#2d66a5]',item.title=='依申请公开'?'_title':'']"> </span>
                    <span class=" text-2xl  inline-block h-full"
                          v-if="item.children&&item.children.length>0&&item.checked==false"
                          @click="handlerMenuSelect(item)">+</span>
                    <span class=" text-2xl  inline-block h-full"
                          v-if="item.children&&item.children.length>0&&item.checked==true"
                          @click="handlerMenuSelect(item)">-</span>
                  </div>
                </div>
                <div v-if="item.children&&item.children.length>0&&item.checked==true">
                  <div v-for="(_item,_index) in item.children" :key="_index" @click="handlerTo(_item)"
                       class="text-gray-700 h-[30px] bg-[#e5e5e5] flex items-center py-0.5 px-3 mt-2"
                       :class="[_item.checked?'!text-[#2d66a5]':'']">
                    {{ _item.title }}
                  </div>
                </div>
              </div>
            </template>
            <!--菜单项-->
          </div>
          <div class="right min-h-[100px] pb-16 " style="flex: 1">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import {mapState} from "vuex";
import Cookies from "js-cookie";

export default {
  name: "Index",
  data() {
    return {
      menuList: [
        {
          title: "政&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;策",
          iconSelect: require("@/assets/P020211118355844590986.png"),
          icon: require("@/assets/P020211118355968147250.png"),
          checked: false,
          name: "guizhang",
          children: [
            {
              title: "规章",
              path: "/guizhang",
              checked: false
            },
            {
              title: "行政规范性文件",
              path: "/xing_zheng_gui_fan_wen_jian",
              checked: false
            },
          ]
        },
        {
          title: "政府信息公开指南",
          iconSelect: require("@/assets/P020200606047882451197.png"),
          icon: require("@/assets/P020200606047834070107.png"),
          checked: false,
          name: "gong_kai_zhi_lan",
          path: "/gong_kai_zhi_lan"
        },
        {
          title: "政府信息公开制度",
          iconSelect: require("@/assets/P020200606048047581291.png"),
          icon: require("@/assets/P020200606048012492372.png"),
          checked: false,
          name: "gong_kai_zhi_du",
          path: "/gong_kai_zhi_du"
        },
        {
          title: "法定主动公开内容",
          iconSelect: require("@/assets/P020200606048047581291.png"),
          icon: require("@/assets/P020200606048012492372.png"),
          checked: false,
          name: "zhu_dong_gong_kai",
          children: [
            {
              title: "机构信息",
              path: "/zhu_dong_gong_kai/ji_gou_xin_xi",
              checked: false
            },
            {
              title: "规划信息",
              path: "/zhu_dong_gong_kai/gui_hua_xin_xi",
              checked: false
            },
            {
              title: "统计信息",
              path: "/zhu_dong_gong_kai/tong_ji_xin_xi",
              checked: false
            },
            {
              title: "政府预决算",
              path: "/zhu_dong_gong_kai/cai_zheng_jue_suan",
              checked: false
            },
            {
              title: "重大项目",
              path: "/zhu_dong_gong_kai/zhong_da_xiang_mu",
              checked: false
            },
            {
              title: "行政收费",
              path: "/zhu_dong_gong_kai/xing_zheng_shou_fei",
              checked: false
            },
            {
              title: "行政处罚公示",
              path: "/zhu_dong_gong_kai/chu_fa",
              checked: false
            },
          ]
        },
        {
          title: "依申请公开",
          iconSelect: require("@/assets/P020200606048407743408.png"),
          icon: require("@/assets/P020200606048368116252.png"),
          checked: false,
          name: "shen_qing_gong_kai",
          path: "/shen_qing_gong_kai"
        },
      ]
    }
  },
  computed: {
    ...mapState('main', ['userInfo'])
  },
  methods: {
    handlerExit() {
      Cookies.remove("token")
      this.$router.push("/login")
    },
    handlerTo(item) {
      if (this.$route.path !== item.path) {
        this.$router.push(item.path)
      }
    },
    handlerMenuSelect(item) {

      // 默认关闭所有选中
      this.menuList.forEach(_item => {
        _item.checked = false
        if (_item.children && _item.children.length > 0) {
          _item.children.forEach(child => {
            child.checked = false
          })
        }
      })
      // 如果菜单没有path 就跳子path  子没有就算了
      if (!item.path) {
        if (item.children && item.children.length > 0) {
          if (this.$route.path != item.children[0].path) {
            this.$router.push(item.children[0].path)
          }
        }
      } else {
        if (this.$route.path != item.path) {
          this.$router.push(item.path)
        }


      }
      if (!item.checked) {
        item.checked = true
        if (item.children && item.children.length > 0) {
          item.children[0].checked = true
        }
      } else {
        item.checked = false
        if (item.children && item.children.length > 0) {
          item.children[0].checked = false
        }
      }
      this.$forceUpdate()
    }
  },
  watch: {
    '$route': function () {
      this.menuList.forEach(item => {
        console.log('>>>>>>>>命中', item.name, this.$route.meta.name)
        if (item.name === this.$route.meta.name) {

          item.checked = true
          if (item.children && item.children.length > 0) {
            item.children.forEach(_item => {
              _item.checked = false
              if (_item.path == this.$route.path) {
                _item.checked = true
              }
            })
          }
        }
      })
    }
  },
  mounted() {
    console.log(">>>>>>>>>>>>>>>>this.userInfo", this.userInfo)
    this.menuList.forEach(item => {
      if (item.name === this.$route.meta.name) {

        item.checked = true
        if (item.children && item.children.length > 0) {
          item.children.forEach(_item => {
            _item.checked = false
            console.log(_item.path == this.$route.path)
            if (_item.path == this.$route.path) {
              _item.checked = true
            }
          })
        }
      }
    })
  }
}
</script>
<style>
._title:last-child {
  word-break: keep-all;
}
</style>
